<template>
  <div class="user-wrapper">
    <div class="content-box" style="display:inline">
      <a-badge :count="count" class="iconPosition" :overflowCount="999" @click="showMessageEvent">
        <a-icon type="message" style="fontSize:20px" />
      </a-badge>
      <div class="messagePosition" v-show="showMessage">
        <div :key="index" v-for="(item, index) in dataSource">
          <a style="color:black" @click="seeInfo(item)"
            ><span>工单号:{{ item.crmNo }}发起通知</span></a
          >
          <a-divider style="margin:0px" />
        </div>
        <div class="noticeMessage" @click="showMoreMessage">查看全部通知</div>
      </div>
      <a-dropdown>
        <span class="action ant-dropdown-link user-dropdown-menu">
          <a-avatar size="small" style="backgroundColor:#87d068;margin-top:-4px;margin-right:2px" :src="imgAvater" />
          <span style="margin-right:5px;margin-left:2px">{{ nickname2 }}</span>
          <a-icon type="down" />
        </span>
        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
          <a-menu-item key="1">
            <router-link :to="{ name: 'userCenter' }">
              <a-icon type="user" />
              <span>个人中心</span>
            </router-link>
          </a-menu-item>

          <a-menu-divider />
          <a-menu-item key="3">
            <a href="javascript:;" @click="handleLogout">
              <a-icon type="logout" />
              <span>退出登录</span>
            </a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>

    <!-- //详情 -->
    <DetailsModel v-if="detailsShow" @cancelEvent="cancelEvent" v-bind:infoListData="infoListData"></DetailsModel>
  </div>
</template>

<script>
import { getNotices, getMemberInfo } from '@/api/public'
import NoticeIcon from '@/components/NoticeIcon'
import { mapActions, mapGetters } from 'vuex'
import Vue from 'vue'
import { ACCOUNT, ROLE_NAME, USERINFO } from '@/store/mutation-types'
import DetailsModel from '@/views/UrgeManage/detailsModel'
export default {
  name: 'UserMenu',
  components: {
    NoticeIcon,
    DetailsModel
  },
  computed: {
    ...mapGetters(['nickname', 'avatar'])
  },
  created() {
    this.selectRight()
    this.getUrgeDataInfo()
  },
  mounted() {
    getMemberInfo().then(response => {
      this.account = response.data.account
      this.info.againpwd = ''
      this.info.newpwd = ''
      this.nickname2 = response.data.name
      Vue.ls.set(ACCOUNT, response.data.account)
    })
  },
  data() {
    return {
      infoListData: {},
      detailsShow: false,
      info: {
        againpwd: '',
        newpwd: ''
      },
      showMessage: false,
      dataSource: [],
      count: 0,
      account: '',
      newpwd: '',
      againpwd: '',
      diasabledInput: true,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      confirmLoading: false,
      visible: false,
      defaultImg: true,
      avaterImg: false,
      imgAvater: 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/image/user.png',
      nickname2: '',
      comName: '福州政支一点支撑平台信息技术有限公司',
      queryParam: { current: 1, pageSize: 5, type: 0 }
    }
  },
  methods: {
    //查看详情
    seeInfo(info) {
      this.infoListData.id = info.urgingId
      this.detailsShow = true
    },
    cancelEvent() {
      this.detailsShow = false
    },
    //查看更多
    showMoreMessage() {
      this.$router.push({ name: 'userCenter' })
      this.showMessage = false
    },
    //展示
    showMessageEvent() {
      this.showMessage = !this.showMessage
    },
    //获取催办总数
    getUrgeDataInfo() {
      getNotices(this.queryParam)
        .then(response => {
          this.count = response.data.total
          this.dataSource = response.data.records
        })
        .catch(error => {})
    },
    //数据查询权限
    selectRight() {
      if (Vue.ls.get(ROLE_NAME) == '区县建设') {
        this.queryParam.roleType = 1
        this.this.queryParam = Vue.ls.get(USERINFO).belong
      } else if (Vue.ls.get(ROLE_NAME) == '客户经理') {
        this.queryParam.roleType = 2
        this.this.manager = Vue.ls.get(USERINFO).name
      } else {
        this.queryParam.roleType = 2
      }
    },
    ...mapActions(['Logout']),
    handleLogout() {
      this.$confirm({
        title: '提示',
        content: '确定要退出登陆?',
        onOk: () => {
          return this.Logout({})
            .then(() => {
              setTimeout(() => {
                window.location.reload()
                Vue.ls.clear()
              }, 16)
            })
            .catch(err => {
              this.$message.error({
                title: '错误',
                description: err.message
              })
            })
        },
        onCancel() {}
      })
    }
  }
}
</script>
<style scoped>
.menubutton {
  margin-right: 20px;
}
.comTitle {
  display: inline;
  margin-right: 250px;
  font-size: 23px;
  font-weight: 600;
}
.iconPosition {
  position: absolute;
  z-index: 111;
  top: 22px;
  right: 15%;
  cursor: pointer;
}
.messagePosition {
  position: absolute;
  z-index: 111;
  top: 60px;
  right: 5%;
  width: 340px;
  background: white;
  text-align: center;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 3px;
  border: 1px solid #F5F6F7;
}
.noticeMessage {
  float: right;
  margin-right: 20px;
  color: #b0b7c5;
  cursor: pointer;
}
</style>
